// 持久化  1：值修改时存储到浏览器   2：初始值读取浏览器存储的值
/*
localStorage
   存储  localStorage.setItem(key,value)
   读取  localStorage.getItem(key)
   删除  localStorage.removeIte(key)

cookie
   js-cookie:
      1：下载  yarn add js-cookie
      2:导入  import jsCookie  from 'js-cookie'
      3:使用
          存储  jsCookie.set(key,value)
          读取  jsCookie.get(key)
          删除  jsCookie.remove(key)

vuex持久化
   vuex-persistedstate
   1:下载  yarn add vuex-persistedstate
   2:导入 根模块导入 import persistedstate from 'vuex-persistedstate'
   3:配制
      {
        state:{},
        mutations:{},
        actions:{},
        getters:{},
        modules:{},
        plugins:[
         persistedstate({
          // 默认是所有数据持久化
          paths:['模块名','模块名.属性名']
         })
        ]
      }
获取用户信息
  1：定义获取用户信息的api
  2:在user模块导入api
  3:定义用户信息的state,mutations,actions
    actions中调用api获取用户信息关存储
  4：在哪里调用actions?
     在导航守卫调用

获取完整用户信息
  1：定义api
  2:导入
  3：actions中调用完成后合并用户信息再存储
*/
import { sysLoginPost } from '@/api/login'
import { sysProfilePost, sysUser } from '@/api/user'
import router, { syncRoutes, constantRoutes, resetRouter } from '@/router'

export default {
  namespaced: true,
  state: {
    token: '',
    userInfo: ''
  },
  mutations: {
    setToken(state, value) {
      state.token = value
    },
    setUserInfo(state, value) {
      state.userInfo = value
    },
    // 删除token
    logout(state) {
      // 重置路由成初始状态（只有静态路由）
      resetRouter()
      // 删除token
      state.token = ''
      // 删除用户信息
      state.userInfo = ''
      //  用户信息为什么不做持久化？
      //  切换帐号怎么办？换电脑更新过用户信息？
      router.push('/login?back=' + location.href.split('#')[1])
    }
  },
  actions: {
    // 登录接口调用
    // 1:导入登录api  2:定义actions方法并调用登录api  3:触发actions 4:存储token
    async toLogin({ commit }, form) {
      const res = await sysLoginPost(form)

      commit('setToken', res.data)
      console.log('toLogin', res)
    },
    // 获取用户信息
    async getUserInfo({ commit }) {
      const res = await sysProfilePost()
      const res2 = await sysUser(res.data.userId)
      // 合并用户信息
      // 1   {...a,...b}
      // 2:  Object.assign({},a,b)
      commit('setUserInfo', Object.assign({}, res.data, res2.data))
      /*
      匹配权限数据
      动态路由[{mata:{name:'settings'}}]
        syncRoutes

      权限数据：  [ "employees","settings", "permissions"]
          res.data.roles.menus
      */
      const newArr = syncRoutes.filter((item) => {
        // item.meta.name在权限数据中是否存在
        return res.data.roles.menus.includes(item.meta.name)
      })
      newArr.push({ path: '*', redirect: '/', hidden: true })
      // 将匹配到的数据添加到路由
      newArr.forEach((item) => {
        router.addRoute(item)
        // addRoute与addRoutes区别
        /*
        addRoutes的值要求是数组，
        addRoute(路由配制对象)的值要求是一个对象
        addRoute(name,路由配制对象),给某个路由添加配制
        */
      })
      // router.addRoutes(newArr)
      // 当前模块action调用其它模块的mutations
      // commit('模块名/方法名',参数,{root:true})
      commit('routes/setRoutes', [...constantRoutes, ...newArr], { root: true })
      // addRoutes添加的路由不能立马使用
      // 解决方案，让路由再经过一次导航守卫就可以用了
      // console.log('匹配数据', newArr)
    }
  }
}
